<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量作用域</title>
</head>

<body>
    <script>
        // 变量作用域：
        // 不同点：
        // 全局变量：
        // 1.全局作用域下声明的变量（在函数外声明）
        // 2.全局作用域下用var声明的变量
        // 3.生命周期长，直接页面关闭，变量才会标为垃极（ 就是回收）   --- 占内存

        // 局部变量
        // 1.在函数内声明的变量
        // 2.作用范围是函数内生效也是用var 声明的变量
        // 3.函数参数部分的变量也是局部变量
        // 4.生命周期短，函数一调用，函数标为垃圾（变量也没有存在意义了）--- 节省空间

        // 注意： 函数内声明，不带var 也可能升格为全局 *****

        //1.
        // var c='hello';//全局变量
        //  function show(){
        //     var a=10;//局部变量
        //     console.log(a);//10
        //     console.log(c);//'hello'
        //  }
        //  show();
        //  console.log(c);//'hello'
        //  console.log(a);// error

        //2.参数部分有变量   局部变量

        /// var c = 'hello';//全局变量
        //           局部变量
        //  function show(a){
        //      a=10;//就近原则  对形参a进行赋值
        //     console.log(a);//10
        //     console.log(c);//'hello'
        //  }
        //  show(20);
        //  console.log(c);//'hello'
        //  console.log(a);// error


        //3. 函数内部 a 前面没有写 ，升格全局
/* 
        var c = 'hello';//全局变量

        function show() {
            a = 100;//升格全局
            console.log(a);//100
            console.log(c);//'hello'
        }
        show();
        console.log(c);//'hello'
        console.log(a);// 100
 */

        //4. 函数内部 a 前面没有写 但是 前声有var a;   就近原则
/* 
        var c = 'hello';//全局变量

        function show() {
            var a = 10;//局部
            a = 100;
            console.log(a);//100
            console.log(c);//'hello'
        }
        show();
        console.log(c);//'hello'
        console.log(a);// 100
 */
/* 
        //注意 变量提升  ： 变量声明会提升（提升到当前作用域的上面）    赋值不会提升
        function demo() {
            console.log(a);//undefined
            var a = 20;//局部变量
            console.log(a);//20
        }
        demo();
        console.log(a);//error
 */

        // 综合运用
        function show() {
            var a = 10;//局部变量
            if (a > 10) {
                var b = 20;
            } else {
                a = 80;
            }
            console.log(a);//80
            console.log(b);//undefined
        }
        show();
        console.log(b);//error
    </script>
</body>

</html>